<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			img {
				width: 100px;
				float: left;
				margin-right: 10px;
			}
			
			ul {
				list-style: none;
				border: 5px solid gold;
				width: 600px;
				margin: 50px auto 0;
				overflow: hidden;
				padding: 20px;
			}

			li {
				width: 296px;
				/*height: 200px;*/
				border: 2px solid black;
				float: left;
			}

			p {
				background-color: yellow;
				margin: 10px 0;
			}

		</style>
	</head>
	<body>

		<ul>
			<li>
				<img src="img/dog.jpg" alt="">
				<p>呵呵</p>
				<p>呵呵</p>
			</li>
			<li>
				<img src="img/dog.jpg" alt="">
				<p>呵呵</p>
				<p>呵呵</p>
			</li>
			<li>
				<img src="img/dog.jpg" alt="">
				<p>呵呵</p>
				<p>呵呵</p>
			</li>
			<li>
				<img src="img/dog.jpg" alt="">
				<p>呵呵</p>
				<p>呵呵</p>
			</li>
			
		</ul>
		
	</body>
</html>